<template>
  <div class="answer-card-status">
    <!-- 状态图例 -->
    <div v-if="showLegend" class="status-types flex items-center gap-4">
      <div class="status-item flex items-center gap-1">
        <div class="status-btn question-answered w-[10px] h-[10px] border border-[#e4e6eb] rounded-sm"></div>
        <span class="text-xs text-gray-600">{{ $t('examCore.questions.answered') }}</span>
      </div>
      <div class="status-item flex items-center gap-1">
        <div class="status-btn unanswered w-[10px] h-[10px] border border-[#e4e6eb] rounded-sm bg-[#d9d9d9]"></div>
        <span class="text-xs text-gray-600">{{ $t('examCore.questions.unanswered') }}</span>
      </div>
      <div class="status-item flex items-center gap-1">
        <div class="status-btn question-marked w-[10px] h-[10px] border border-[#e4e6eb] rounded-sm bg-[#fa8c16]"></div>
        <span class="text-xs text-gray-600">{{ $t('examCore.questions.marked') }}</span>
      </div>
    </div>

    <!-- 题目列表 -->
    <div v-if="showQuestions" class="questions-list space-y-4">
      <div v-for="section in sections" :key="section.title" class="border border-[#e4e6eb] rounded px-2 py-3">
        <div class="question-section-header mb-2 flex items-center">
          <h3 class="text-sm font-medium text-[#191919]">{{ section.title }}</h3>
          <p class="text-xs text-gray-500 ">{{ section.description }}</p>
        </div>
        <div class="flex flex-wrap">
          <QuestionItemComponent 
            v-for="question in section.questions" 
            :key="question.id" 
            :question="question"
            @click="handleQuestionClick" 
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import QuestionItemComponent from '../question-item.vue';
import type { QuestionItem, QuestionSection } from '#/types/question';
import { $t } from '@vben/locales';

interface Props {
  sections?: QuestionSection[];
  showLegend?: boolean;
  showQuestions?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  sections: () => [],
  showLegend: true,
  showQuestions: false
});

const emit = defineEmits<{
  questionClick: [question: QuestionItem];
}>();

defineOptions({
  name: 'AnswerCardStatus'
});

// 处理题目点击
const handleQuestionClick = (question: QuestionItem) => {
  emit('questionClick', question);
};
</script>

<style scoped>
@import '../question-status.css';
.status-btn {
  border-radius: 3px;
}

.questions-list {
  /* 移除固定高度和滚动条，让父容器处理滚动 */
}
</style> 
